<template>
    <div class="sub_nav_bar_left">
        <header>
            <img :src="subNavLeftImgSrc[0]" alt="">
            <div>特价好货直播中</div>
        </header>
        <div class="main">
            <swiper :dataList='subNavLeftImgSrc.slice(4)'/>
        </div>
    </div>
</template>

<script>
    import Swiper from './Swiper'
    export default {
        name: '',
        data () {
            return {
                subNavLeftImgSrc:[]
            }
        },
        components: {
            Swiper
        },
        mounted () {
            let totalImgSrc=this.$parent.$parent.imgSrc
            this.subNavLeftImgSrc=totalImgSrc
        }
    }
</script>

<style scoped lang='less'>
.sub_nav_bar_left{
    width: 172px;
    height: 100%;
    border-radius: 10px;
    background-color: #fff;
    header{
        display: flex;
        width: 100%;
        height: 34px;
        padding: 7px 0px 7px 5px;
        img{
            height: 100%;
        }
        div{
            width: 90px;
            height: 20px;
            line-height: 20px;
            color: red;
            font-size: 12px;
            text-align: center;
            background-color: #ffebe3;
        }
    }
    .main{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: calc(100% - 34px);
        background-color: #fff;
    }
}
</style>
